<template>
  <view class="home">
    <view class="home-head">
      <img src="/static/assets/home/address_book/背景图.jpg" alt="背景图" mode="aspectFile" class="home-head-img" />
      <view class="blur-mask"></view>
      <view class="home-head-title" @click="goToTitlePage">
        <img src="/static/assets/home/address_book/头像.jpg" alt="头像" mode="aspectFile" class="home-head-title-img" />
        <text class="home-head-title-text">UAT环北部湾广西水资源配置工程</text>
        <img src="/static/assets/home/right_arrow.png" alt="下一级" mode="aspectFile" class="home-head-title-icon" />
      </view>
      <view class="home-head-content">
        <view class="task-item" @click="gotoTaskCenter('todo')">
          <text class="task-number task-number--red">{{todoCount}}</text>
          <text class="task-text">待办任务</text>
        </view>
        <view class="task-item" @click="gotoTaskCenter('done')">
          <text class="task-number task-number--blue">{{doneCount}}</text>
          <text class="task-text">已办任务</text>
        </view>
        <view class="task-item" @click="gotoTaskCenter('initiated')">
          <text class="task-number task-number--gray">{{initiatedCount}}</text>
          <text class="task-text">我的发起</text>
        </view>
      </view>
    </view>
    <view class="home-menu">
      <view class="home-menu-content" v-if="menuList.length > 0">
        <view v-for="(menuItem, index) in menuList" :key="index" class="menu-category">
          <text class="home-content-title">{{ menuItem.fullName }}</text>
          <view class="home-content-patch" v-if="menuItem.children && menuItem.children.length">
            <view v-for="(child, childIndex) in menuItem.children" :key="childIndex" class="home-content-patch-item"
              @click="handleItemClick(child)">
              <u--image :showLoading="true" :src="getMenuItemIcon(child)" width="45px" height="45px"></u--image>
              <text class="item-text">{{ child.fullName }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    apiProjectAuthorityCurrentUser
  } from "@/api/project/authority.js"
  export default {
    data() {
      return {
        menuList: [],
        todoCount: 0,
        doneCount: 0,
        initiatedCount: 0
      }
    },
    created() {
      this.init();
      this.gettaskCentNum();
    },
    methods: {
      init() {
        apiProjectAuthorityCurrentUser({
          projectId: uni.getStorageSync("projectId"),
          loginFrom: 'App',
          type: 'App'
        }).then(res => {
          if (res.code === "00000") {
            this.menuList = res.data.menuList;
          } else {
            uni.showToast({
              title: '菜单获取失败',
              icon: 'none'
            });
          }
        })
      },
      gettaskCentNum(){
        const taskCounts = uni.getStorageSync('taskCounts') || {};
        this.todoCount = taskCounts.todo || 0;
        this.doneCount = taskCounts.done || 0;
        this.initiatedCount = taskCounts.initiated || 0;
      },
      getMenuItemIcon(child) {
        const iconMap = {
          '1656918611253424128': '/static/home/workbench/preShiftMeeting.png',
          '1662350422957215744': '/static/home/workbench/security_check.png',
          '1656917648744542208': '/static/home/workbench/qualityVerification.png',
          '1656918772415361024': '/static/home/workbench/preShiftMeeting.png',
          '1681556169740386304': '/static/home/workbench/supervisiondiary.png',
          '1656918929982779392': '/static/home/workbench/preShiftMeeting.png',
          '1689091705713315842': '/static/home/workbench/projectManagementLog.png',
          '1681263417527844864': '/static/home/workbench/settingsLog.png'
        };
        if (iconMap[child.id]) {
          return iconMap[child.id];
        }
        return '/static/home/workbench/quality_testing_empty.png';
      },
      goToTitlePage() {
        uni.navigateTo({
          url: "/pages/other/workbench/projectCenter",
        });
      },
      gotoTaskCenter(taskType) {
        uni.navigateTo({
          url: `/pages/other/workbench/TaskCenter?type=${taskType}`
        });
      },
      handleItemClick(child) {
        uni.navigateTo({
          url: `/pages/other/workbench/workbenchChild/workbenchChild?id=${child.id}&title=${encodeURIComponent(child.fullName)}`
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;

    .home-head {
      display: flex;
      flex-direction: column;
      position: relative;

      .home-head-img {
        z-index: 0;
        width: 100%;
        height: 310px;
      }

      .blur-mask {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 290px;
        height: 35px;
        backdrop-filter: blur(5px);
        background: rgba(255, 255, 255, 0);
      }

      .home-head-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 80px;
        left: 5%;
        right: 5%;

        .home-head-title-img {
          width: 70px;
          margin-right: 10px;
        }

        .home-head-title-text {
          color: white;
          font-size: 17px;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 10px;
        }

        .home-head-title-icon {
          width: 10px;
          height: 15px;
        }
      }

      .home-head-content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        top: 185px;
        height: 85px;
        left: 5%;
        right: 5%;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        .task-item {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .task-number {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 4px;
        }

        .task-number--red {
          color: red;
        }

        .task-number--blue {
          color: blue;
        }

        .task-number--gray {
          color: gray;
        }

        .task-text {
          font-size: 16px;
          color: rgb(146, 159, 178);
        }
      }
    }

    .home-menu {
      z-index: 1;
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 280px;

      .home-menu-content {
        margin: 7px 15px;
        display: flex;
        flex-direction: column;
        height: 60vh;
        max-height: calc(100vh - 340px);
        overflow-y: auto;
        padding: 0 10px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        background-color: white;

        .home-content-title {
          margin-left: 10px;
          font-size: 18px;
          font-weight: 450;
        }

        .home-content-patch {
          margin-bottom: 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;

          .home-content-patch-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70px;
            margin: 5px;

            .item-text {
              width: 70px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: center;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
</style>
